<template>
  <div class="all_sales_main m-4">
    <!--    搜素框  -->
    <div class="row" >
      <div class="col-md-6">
        <el-select v-model="fiter_ifdeal" placeholder="选择交易情况..." @change="changecheck">
          <el-option label="交易中" value="1"></el-option>
          <el-option label="已交易" value="2"></el-option>
        </el-select>
        <el-button type="info" icon="el-icon-delete" @click="clearFindInput()" class="ml-3">重置</el-button>
      </div>
      <div class="col-md-6">
      </div>
    </div>
    <div class="show_data mt-4">
      <el-table
          ref="multipleTable"
          v-horizontal-scroll="'always'"
          show-overflow-tooltip
          :data="deal_info"
          style="width: 100%"
          :cell-style="{color: '#666', fontFamily: 'Arial',fontSize:'17px'}"
          :header-cell-style="{background:'whitesmoke', fontFamily:'Helvetica',fontSize:'20px'}"
          height="700"
          @selection-change="handleSelectionChange"
          tooltip-effect="dark"
          :default-sort = "{prop: 'date', order: 'descending'}">
        <el-table-column
            type="selection"
            width="50">
        </el-table-column>
        <el-table-column
            fixed
            prop="deal_time"
            label="交易创建时间"
            width="210">
          <template slot-scope="scope">
            <i class="deal_time"></i>
            <span>{{scope.row.deal_time }}</span>
          </template>
        </el-table-column>
        <el-table-column
            prop="idle_item_ifdeal"
            label="交易情况"
            width="100">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.idle_item_ifdeal==1" disable-transitions type="primary">
              <span class="typeClass">交易中</span>
            </el-tag>
            <el-tag v-else-if="scope.row.idle_item_ifdeal==2" disable-transitions type="success">
              <span class="typeClass">已交易</span>
            </el-tag>
            <el-tag v-else-if="scope.row.idle_item_ifdeal==3" disable-transitions type="danger">
              <span class="typeClass">未交易</span>
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
            prop="idle_item_name"
            label="闲置物品名"
            width="150">
        </el-table-column>
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="类别：">
                <span v-if="props.row.idle_item_category==1">考研笔记</span>
                <span v-else-if="props.row.idle_item_category==2">书籍</span>
                <span v-else-if="props.row.idle_item_category==3">文具</span>
                <span v-else-if="props.row.idle_item_category==4">考卷</span>
                <span v-else-if="props.row.idle_item_category==5">其他</span>
              </el-form-item>
              <el-form-item label="科目：">
                <span v-if="props.row.idle_item_subject==1">英语</span>
                <span v-else-if="props.row.idle_item_subject==2">数学</span>
                <span v-else-if="props.row.idle_item_subject==3">政治</span>
                <span v-else-if="props.row.idle_item_subject==4">专业</span>
                <span v-else-if="props.row.idle_item_subject==5">其他</span>
              </el-form-item>
              <el-form-item label="新旧程度：">
                <span v-if="props.row.idle_item_degree==1">全新</span>
                <span v-else-if="props.row.idle_item_degree==2">9成新</span>
                <span v-else-if="props.row.idle_item_degree==3">5成新</span>
                <span v-else-if="props.row.idle_item_degree==4">使用过</span>
                <span v-else-if="props.row.idle_item_degree==5">破旧点</span>
              </el-form-item>
              <el-form-item label="描述：">
                <span>{{ props.row.idle_item_info }}</span>
              </el-form-item>
              <el-form-item label="图片：" v-show="props.row.idle_item_img !='default_idle_img.jpg'">
                <img :src="'/api/storage/idle_img/'+props.row.deal_from_user_id+'/'+props.row.idle_item_img"
                     style="width:30%;height:30%;object-fit:contain;border-radius: 2px"  alt="...">
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column
            prop="deal_from_user_name"
            label="卖家（发布者）"
            width="180">
        </el-table-column>
        <el-table-column
            prop="deal_to_user_name"
            label="买家"
            width="150">
        </el-table-column>
        <!--      <el-table-column-->
        <!--          prop="idle_item_price"-->
        <!--          label="价格"-->
        <!--          width="120">-->
        <!--        <template slot-scope="scope">-->
        <!--          <i class="deal_time"></i>-->
        <!--          <span>{{scope.row.idle_item_price }}元</span>-->
        <!--        </template>-->
        <!--      </el-table-column>-->
        <el-table-column
            prop="deal_to_user_remark"
            label="买家备注"
            width="200">
        </el-table-column>
        <el-table-column
            label="操作"
            width="240">
          <template slot-scope="scope">
            <el-button
                v-show="scope.row.idle_item_ifdeal==1"
                type="primary"
                @click="finishDeal(scope.$index, scope.row)">
              <span class="btnfontClass" >完成交易</span>
            </el-button>
            <el-button
                v-show="scope.row.idle_item_ifdeal==1"
                type="danger"
                @click="cancelBuyDeal(scope.$index, scope.row)">
              <span class="btnfontClass" >取消交易</span>
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--         分页 -->
    <div class="mt-4 panel-footer" style="text-align:center;" v-show="deal_info.length>0">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="param.limit"
          layout="total, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import {getAllDeals,finishDealByBuyer,cancelDeal} from '@/api/Deal'


export default {
  name: "deals",
  data(){
    return{
      //筛选 交易情况
      fiter_ifdeal:'',
      //搜索
      findName:'',
      //容器
      deal_info:[],
      currentPage:1,
      total:0,
      param:{
        page:1,
        limit:12
      }
    }
  },
  methods:{
    //多选
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //搜索一页多少条
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.param.limit=val;
      this.init();
    },
    //搜索第几页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.param.page=val;
      this.init();
    },
    init(){

      getAllDeals({
        page: this.param.page,
        limit: this.param.limit,
        fiter_ifdeal:this.fiter_ifdeal
      }).then(res=>{
        this.deal_info=res.data.info;
        this.total=res.data.total;


      });
    },
    //刷新
    clearFindInput(){
      this.fiter_ifdeal="";
      this.init();
    },
    //  数据筛选
    changecheck(){
      this.init();
    },
    //  完成交易
    finishDeal(index, row){

      //再次确认
      this.$confirm('确认已收到物品，完成交易，该操作不可恢复?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

        finishDealByBuyer({
          idle_item_id:row.idle_item_id,
          deal_id:row.deal_id
        }).then(res=>{
          if(res.data.code==1){
            this.$message.success("交易完成！！");
            this.init();
          }
          else{
            this.$message.success("交易失败！！");
            this.init();
          }
        });




      }).catch(() => {
        this.$msg.error("取消操作！");
      });

    },
    //  取消交易
    cancelBuyDeal(index, row){
      //再次确认
      this.$confirm('确认取消交易?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

        cancelDeal({
          idle_item_id:row.idle_item_id
        }).then(res=>{
          if(res.data.code==1){
            this.$message.success("取消成功！！");
            this.init();
          }
          else{
            this.$message.success("取消失败！！");
            this.init();
          }
        });

      }).catch(() => {
        this.$msg.error("取消操作！");
      });
    }



  },
  created() {
    let _this=this;
    _this.init();

  }
}
</script>

<style scoped>
/*表格展开功能样式*/
.demo-table-expand {
  font-size: 0;
  padding-left: 20px;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>
